<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-around">
      <template v-if="total>0">
        <el-col :span="7" v-for="item in appointment">
          <div class="grid-content bg-purple" >
            <div>
              <el-avatar :size="50" :src="circleUrl"></el-avatar>
            </div>
            <span>{{item.memberName}}</span><span class="vip">{{level}}</span>
            <div style="overflow: hidden">
              <ul class="left">
                <li>电话号码:</li>
                <li>预约技师:</li>
                <li>预约时间:</li>
              </ul>
              <ul class="right">
                <li>{{item.memberPhoneNumber}}</li>
                <li>{{item.technicianName}}</li>
                <li>{{item.reservationTime}}</li>
              </ul>
            </div>
            <div>
              <img src="../../assets/appointment/already.jpg" alt="">
            </div>
          </div>
        </el-col>
      </template>
      <template v-else>
        <h1>暂无到店</h1>
      </template>

    </el-row>
    <div>
      <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              @current-change="handleCurrentChange"
              prev-text="上一页"
              next-text="下一页"
              layout="prev, pager, next"
              :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {createNamespacedHelpers} from 'vuex';
  const {mapMutations,mapState,mapActions} = createNamespacedHelpers('appointment')
  export default {
    name: "AlreadyComing",
    data(){
      return{
        circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        name:'gzz',
        level:'黄金会员'
      }
    },
    computed:{
      ...mapState(['appointment','total','pageSize','pages','currentPage'])
    },
    methods:{
      ...mapActions(['getAppointment']),
      ...mapMutations(['setCurrentPage']),
      handleCurrentChange(val){
        this.setCurrentPage(val)
      }
    },
    mounted() {
      this.getAppointment({reservationState:2});
    },
    watch:{
      currentPage(){
        this.getAppointment({reservationState:2});
      }
    }
  }
</script>

<style scoped lang="scss">
  img{
    display: inline-block;
    margin: 10px 10px 0;
    width: 80px;
    border-radius: 5px;
  }
  ul{
    display: block;
    margin: 10px 0 0;
    list-style: none;
    padding: 0;
  }
  .left{
    float: left;
    margin-left: 5px;
    color: rgb(142,142,142);
  }
  .right{
    float: right;
    margin-right: 5px;
  }
  span{
    font-size: 14px;
  }
  .vip{
    font-size: 12px;
    margin-left: 10px;
    color: gold;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: white;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 10px;
  }
  .row-bg {
    padding: 10px 0;
    margin-bottom: 10px;
    /*background-color: #f9fafc;*/
  }
</style>